'use client';

import React from 'react';

interface Props {
  showHistoricalFlow: boolean;
  showODFlow: boolean;
  onToggleHistorical: () => void;
  onToggleOD: () => void;
}

export default function LayerControlPanel({
  showHistoricalFlow,
  showODFlow,
  onToggleHistorical,
  onToggleOD,
}: Props) {
  return (
    <div className="flex flex-col gap-3 p-3 bg-gray-900/90 border border-gray-700 rounded-lg shadow-xl backdrop-blur-md text-gray-100 min-w-[200px]">
      <div className="text-sm font-semibold border-b border-gray-700 pb-2">
        图层控制
      </div>
      
      {/* 历史净流量开关 */}
      <label className="flex items-center gap-3 cursor-pointer hover:bg-gray-800/50 p-2 rounded transition-colors">
        <input
          type="checkbox"
          checked={showHistoricalFlow}
          onChange={onToggleHistorical}
          className="w-4 h-4 accent-blue-500"
        />
        <span className="text-sm">过去30min净流量</span>
      </label>

      {/* OD 流量开关 */}
      <label className="flex items-center gap-3 cursor-pointer hover:bg-gray-800/50 p-2 rounded transition-colors">
        <input
          type="checkbox"
          checked={showODFlow}
          onChange={onToggleOD}
          className="w-4 h-4 accent-blue-500"
        />
        <span className="text-sm">过去30min OD 流量路径</span>
      </label>
    </div>
  );
}